<template>
  <div class="boxx">
    <h3>{{america.title}}</h3>
    <div class="movie-list">
      <div class="list" v-for="item in movieList">
        <!-- <router-link :to="{ name: 'movies_xq', params: { movieId: item.id }}"> -->
        <router-link :to="{name:'movies_xq', query:{movieId: item.id}}">
        <div class="img" >
          <img :src=item.images.large >
        </div>
        <div class="right">
          <div class="name">
            {{item.title}}
          </div>
          {{item.id}}
        </div>
      </router-link>
      </div>
    </div>
    <compage @ievent="ievent($event)" v-bind:america="america" ></compage>
  </div>
</template>
<script>
  import qs from 'qs'
  import compage from './compage'

  export default {
    name: "northamerica",
    data(){
      return{
          america:{},
          movieList:[]
      }
    },
    methods:{
      ievent(ev){
        this.$http.get("/api/movie/in_theaters",{
          params: {
           "start": ev.dd,
           "count": 6
         }
        })
        .then(({ data }) => {
          console.log(data, '这是点击的');
          this.movieList = data.subjects;
          
        })
        .catch(error => {
          console.log(error)
        });
      }
    },
    created(){
        this.$http.get("/api/movie/in_theaters",{
          params: {
           "start": 0,
           "count": 50000
         }
        })
        .then(({ data }) => {
          console.log(data, '--------------->>>>>>');
          this.america = data || {};
          console.log(this.america)
          
        })
        .catch(error => {
          console.log(error)
        });
        

        this.$http.get("/api/movie/in_theaters",{
          params: {
           "start": 0,
           "count": 6
         }
        })
        .then(({ data }) => {
          console.log(data, '这是点击的');
          this.movieList = data.subjects;
          
        })
        .catch(error => {
          console.log(error)
        });
      },
      components:{
        'compage': compage
      }
  }
</script>
<style scoped>
  .boxx{
    margin: 20px 0;
    width: 100%;
  }
  .boxx h3{
    font-weight: normal;
    text-align: left;
    color: #333;
    padding: 10px;
  }
  .boxx .movie-list{
    width: 100%;
    margin: 10px 0;
    margin-top: 0;
  }
  .boxx .movie-list .list{
    width: 48%;
    height: 190px;
    float: left;
    margin-left: 4%;
    margin-top: 20px;
  }
  .boxx .movie-list .list .img{
    width: 176px;
    height: 100%;
    float: left;
  }
  .boxx .movie-list .list .img img{
    width: 100%;
    height: 100%;
  }
  .boxx .movie-list .list .right{
    width: 390px;
    float: right;
    height: 100%;
  }
  .boxx .movie-list .list .right .name{
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #333;
    text-align: left;
    overflow: hidden;
  }
  .boxx .movie-list .list:nth-child(2n+1){
    margin-left: 0;
  }
</style>